import React, { Component } from "react";
import {
  Steps,
  Form,
  Input,
  Row,
  Col,
  Button,
  Select,
  Result,
  DatePicker,
} from "antd";
import { SmileOutlined } from "@ant-design/icons";
import RichEditor from "./richEditor";
import { dateFormat } from "../../utils";
import { Addleave } from "../../utils/api";
const { Step } = Steps;

const steps = [
  { title: "基本信息", desc: "选择标题和分类" },
  { title: "请假详情", desc: "请如实填写请假详情" },
];
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
export const list = [
  {
    title: "护士",
    value: "护士",
  },
  {
    title: "医师",
    value: "医师",
  },
  {
    title: "主管护士",
    value: "主管护士",
  },
];
export const areas = [
  {
    title: "妇科",
    value: "妇科",
  },
  {
    title: "儿科",
    value: "儿科",
  },
  {
    title: "助产科",
    value: "助产科",
  },
  {
    title: "急诊科",
    value: "急诊科",
  },
  {
    title: "精神科",
    value: "精神科",
  },
];
export const phoneReg = /^1(3|5|6|7|8|9)\d{9}$/;
export default class AdViseAdd extends Component {
  state = {
    current: 0,
    content: "",
    formdata: null,
    flag: true,
  };

  getContent = (content) => {
    this.setState({
      content,
    });
  };

  //跳转页面查看结果
  pathpage=()=>{
    this.props.history.push("/main/nurse/youresult")
  }

  handleChange = (value) => {
    console.log(value);
  };
  next = () => {
    this.fisrtForm.validateFields().then((value) => {
      this.setState({
        current: this.state.current + 1,
        formdata: value,
      });
    });
  };
  handleSumbit = () => {
    let value = this.state.formdata;
    value.flag = this.state.flag;
    value.htmllable = this.state.content;
    value.date = dateFormat(value.date);
    value.dates = dateFormat(value.dates);
    // 插入数据
    Addleave(value).then((res) => {
      console.log(res);
    });
  };
  prev = () => {
    this.setState({
      current: this.state.current - 1,
    });
  };
  render() {
    const { current, flag } = this.state;
    return (
      <div>
        <h1>添加意见 - 踊跃发表建议 - 你多提议,我们将更好的服务社区 </h1>
        <div style={{ marginTop: 20 }}>
          {/* 步骤条 */}
          <Steps current={current}>
            {steps.map((item, i) => {
              return (
                <Step key={i} title={item.title} description={item.desc}></Step>
              );
            })}
          </Steps>
          {/* 步骤条内容  */}
          <div
            className="step-content"
            style={{ marginTop: 20, display: current == 0 ? "block" : "none" }}
          >
            <Row>
              <Col span={8}>
                <Form
                  name="addForm"
                  ref={(el) => (this.fisrtForm = el)}
                  layout="vertical"
                  className="form-box"
                >
                  <Form.Item
                    name="name"
                    label="姓名"
                    rules={[{ required: true }]}
                  >
                    <Input style={{ width: "450px" }} />
                  </Form.Item>
                  <Form.Item
                    name="Email"
                    label="邮箱地址"
                    rules={[{ required: true }]}
                  >
                    <Input style={{ width: "450px" }} />
                  </Form.Item>
                  <Form.Item
                    name="phone"
                    label="电话"
                    rules={[
                      { required: true },
                      {
                        pattern: phoneReg,
                        message: "请输入正确的手机号码",
                      },
                    ]}
                  >
                    <Input style={{ width: "180px" }} />
                  </Form.Item>
                  <Form.Item
                    label="职位"
                    name="type"
                    rules={[{ required: true, message: "请选择" }]}
                  >
                    <Select placeholder="请选择职位">
                      {list.map((item, i) => {
                        return (
                          <Select.Option value={item.value} key={i}>
                            {" "}
                            {item.title}{" "}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                  <Form.Item name="date" label="离院时间">
                    <DatePicker />
                  </Form.Item>
                  <Form.Item name="dates" label="回院时间">
                    <DatePicker />
                  </Form.Item>
                  <Form.Item
                    label="科室"
                    name="office"
                    rules={[{ required: true, message: "请选择科室" }]}
                  >
                    <Select placeholder="请选择">
                      {areas.map((item, i) => {
                        return (
                          <Select.Option value={item.value} key={i}>
                            {" "}
                            {item.title}{" "}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                </Form>
              </Col>
            </Row>
          </div>

          <div
            className="step-content"
            style={{
              height: 270,
              marginTop: 20,
              display: current == 1 ? "block" : "none",
            }}
          >
            <RichEditor
              content={this.state.content}
              getContent={this.getContent}
            ></RichEditor>
          </div>

          <div
            className="step-content"
            style={{ marginTop: 20, display: current == 2 ? "block" : "none" }}
          >
            <Result
              icon={flag && <SmileOutlined />}
              title="Your operation has been executed"
            />
          </div>

          {/* 按钮的显示和隐藏  */}
          <div className="action-btns" style={{ marginTop: 10 }}>
            {current > 0 && (
              <Button
                style={{ background: "orange" }}
                onClick={() => this.prev()}
              >
                上一步
              </Button>
            )}
            {current == steps.length - 1 && (
              <Button type="danger" onClick={() => this.handleSumbit()}>
                提交
              </Button>
            )}

            {current < steps.length - 1 && (
              <Button type="primary" onClick={() => this.next()}>
                下一步
              </Button>
            )}

            <Button type="primary" onClick={() => this.pathpage()}>
              查看审批结果
            </Button>
          </div>
        </div>
      </div>
    );
  }
}
